---
title: Breadcrumb
description: "`Breadcrumb`は、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。"
storybook: components-breadcrumb--basic
source: components/breadcrumb
style: components/breadcrumb/breadcrumb.style.ts
---

```tsx preview
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

## 使い方

:::code-group

```tsx [package]
import { Breadcrumb } from "@yamada-ui/react"
```

```tsx [alias]
import { Breadcrumb } from "@/components/ui"
```

```tsx [monorepo]
import { Breadcrumb } from "@workspaces/ui"
```

:::

```tsx
<Breadcrumb.Root>
  <Breadcrumb.Link />
  <Breadcrumb.Ellipsis />
</Breadcrumb.Root>
```

### itemsを使う

```tsx preview functional
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} />
```

### バリアントを変更する

```tsx preview
<VStack>
  <For each={["plain", "underline"]}>
    {(variant, index) => (
      <Breadcrumb.Root variant={variant} key={index}>
        <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
        <Breadcrumb.Link href="/" currentPage>
          魔人ブウ編
        </Breadcrumb.Link>
      </Breadcrumb.Root>
    )}
  </For>
</VStack>
```

### 区切りをカスタマイズする

区切りをカスタマイズする場合は、`separator`に区切り文字を設定します。

```tsx preview
<Breadcrumb.Root separator="/">
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

アイコンを区切りとして使う場合は、`separator`に`ReactNode`を設定します。

```tsx preview
<Breadcrumb.Root separator={<ChevronsRightIcon />}>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

### 省略を使用する

省略を使用する場合は、省略する位置に`Breadcrumb.Ellipsis`を設定します。

```tsx preview
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Breadcrumb.Ellipsis />
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

または、`startBoundaries`と`endBoundaries`に数値を設定することで省略できます。

```tsx preview functional
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} endBoundaries={1} startBoundaries={1} />
```

### 省略した項目をメニューで表示する

```tsx preview
<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Menu.Root>
    <Menu.Trigger>
      <Breadcrumb.Ellipsis cursor="pointer" />
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item as="a" href="/">
        ピッコロ大魔王編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        サイヤ人編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        フリーザ編
      </Menu.Item>
    </Menu.Content>
  </Menu.Root>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>
```

### 省略をカスタマイズする

```tsx preview functional
const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return (
  <Breadcrumb.Root
    ellipsis={({ items }) => {
      return (
        <Menu.Root>
          <Menu.Trigger>
            <Breadcrumb.Ellipsis
              cursor="pointer"
              focusVisibleRing="outline"
              outline="none"
              rounded="l1"
            />
          </Menu.Trigger>

          <Menu.Content>
            {items.map(({ href, label }, index) => (
              <Menu.Item key={index} as="a" href={href}>
                {label}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Root>
      )
    }}
    endBoundaries={1}
    items={items}
    startBoundaries={1}
  />
)
```

## Props

<PropsTable name="breadcrumb" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
